<template>
	<view class="category-wrap" :data-theme="theme()" :class="theme() || ''">
		<view class="topBox" id="topBox">
			<view class="searchtopBox">
				<view class="searchtopBox-flex">
					<view class="icon iconfont icon-sousuo"></view>
					<input class="flex-1 m-0-20 f26" type="text" v-model="keyWord" placeholder="搜索商家">
					<view class="searchBot" @click="onWaysearch">搜索</view>
				</view>
			</view>
			<view class="selectorTop">
				<view class="selectorBox">
					<view class="d-b-c p-0-30">
						<picker @change="provinceChange" :value="provinceIndex" :range="province">
							<view class="selectorBox-picker">{{province[provinceIndex]||'选择省'}}</view>
						</picker>
						<picker @change="cityChange" :value="cityIndex" :range="city"
							:disabled="provinceIndex?false:true" @click="onShowt(1)">
							<view class="selectorBox-picker">{{city[cityIndex]||'选择市'}}</view>
						</picker>
						<picker @change="areaChange" :value="areaIndex" :range="area" :disabled="cityIndex?false:true"
							@click="onShowt(2)">
							<view class="selectorBox-picker">{{area[areaIndex]||'选择区'}}</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="addressBox d-b-c" @click="onWayCurrent">
				<view class="fb f26">{{address}}</view>
				<view class="icon iconfont icon-dizhi1"></view>
			</view>
		</view>

		<view class="scrollView">
			<scroll-view scroll-y="true" :style="'height:' + topBoxHeight + 'px'" class="width180">
				<view v-for="(item,index) in classifyList" :key="index"
					:class="classifyListindex == index?'scrollView_left theme-bg fb':'scrollView_left gray9'"
					@click="onWayindex(index)">
					{{item.name}}
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" :style="'height:' + topBoxHeight + 'px'" class="scrollView_right">
				<view v-for="(item,index) in shopList" :key="index" class="scrollView_right_for mb40 pb30"
					@click="goto_shop(item)">
					<image :src="item.logoFilePath" mode=""></image>
					<view class="gray3 mt20 f26 fb">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>

		<view class="publish">
			<button class="butShare" open-type="share">
				<image src="http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/butShare02.png" mode="aspectFit">
				</image>
			</button>
		</view>

	</view>

</template>

<script>
	export default {

		data() {
			return {
				topBoxHeight: 0,
				//地址
				munData: [], //地址数据
				provinceIndex: '',
				province: [],
				city: [],
				cityIndex: '',
				area: [],
				areaIndex: '',
				//搜索key
				keyWord: '',
				//当前地址
				address: '附近商家',
				classifyList: [{
					name: '全部',
					categoryId: '',
					depositMoney: ''
				}],
				classifyListindex: 0,
				shopList: [],
				pageIndex: 1,


			}
		},
		onLoad(option) {

		},
		onShow() {
			this.getMunicipalities();
			this.get_classify();
			this.getData();
		},
		mounted() {
			this.getFixedElementHeight();
		},
		methods: {
			//选择分类
			onWayindex(index) {
				this.classifyListindex = index
				this.keyWord = ''
				this.onWayinitial()
				this.getData()
			},
			getFixedElementHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let deviceHeight = res.windowHeight;
						let view = uni.createSelectorQuery().select('#topBox');
						view.boundingClientRect(data => {
							that.topBoxHeight = deviceHeight - data.height
							console.log(that.topBoxHeight, 'topBoxHeight');
						}).exec();

					}
				});

			},
			onShowt(index) {
				switch (index) {
					case 1:
						if (this.provinceIndex == '') {
							uni.showToast({
								title: '请先选择省区',
								icon: 'none'
							})
						}
						break;
					default:
						if (this.cityIndex == '') {
							uni.showToast({
								title: '请先选择市区',
								icon: 'none'
							})
						}
						break;
				}
			},
			// 获取省市区
			getMunicipalities() {
				let that = this;
				that._post('settings/getRegion', {}, function(res) {
					uni.hideLoading()
					res.data[0].map((item) => {
						that.province.push(item.label);
					});
					that.munData = res.data
					that.onWayshow();
				});
			},
			//省市区初始化
			onWayshow() {
				let e = {};
				e.detail = {};
				e.detail.value = 17;
				this.provinceChange(e);
				e.detail.value = 12;
				this.cityChange(e);
				e.detail.value = 2;
				this.areaChange(e);
			},
			//选择省
			provinceChange(e) {
				this.provinceIndex = e.detail.value
				this.city = [];
				this.munData[1].map((item, index) => {
					if (this.provinceIndex == index) {
						item.map((item2) => {
							this.city.push(item2.label);
						})
					}
				});
			},
			//选择市
			cityChange(e) {
				this.cityIndex = e.detail.value
				this.area = []
				this.munData[2].map((item, index) => {
					if (this.provinceIndex == index) {
						item.map((item2, index2) => {
							if (this.cityIndex == index2) {
								item2.map((item3) => {
									this.area.push(item3.label);
								})
							}
						})
					}
				});
			},
			//选择区
			areaChange(e) {
				this.areaIndex = e.detail.value
			},

			//选择当前位置
			onWayCurrent() {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						that.address = res.address
					}
				});
			},

			//获取分类
			get_classify() {
				let that = this;
				that._post('supplier/apply/category', {}, function(res) {
					if (res.data.list || res.data.list.length) that.classifyList = that.classifyList.concat(res
						.data.list);
				});
			},
			//搜索
			onWaysearch() {
				this.onWayinitial()
				this.getData()
			},
			onWayinitial() {
				this.continue = false
				this.shopList = []
				this.pageIndex = 1
			},
			/*获取数据*/
			getData() {
				let that = this;
				if (that.continue) return
				uni.showLoading({
					title: '加载中'
				})
				that._postBody(
					'supplier/index/list', {
						pageIndex: that.pageIndex,
						pageSize: 10,
						name: that.keyWord
					},
					res => {
						uni.hideLoading()
						if (res.data.total <= that.pageIndex * 10) that.continue = true
						that.pageIndex = that.pageIndex + 1
						that.shopList = that.shopList.concat(res.data.records)
					}
				);
			},
			//跳转店铺首页
			goto_shop(item) {
				this.gotoPage('/pages/shop/shop?shopSupplierId=' + item.shopSupplierId);
			},

		}

	}
</script>

<style lang="scss" scoped>
	.category-wrap {
		height: 100vh;
		overflow-y: hidden;

		.topBox {
			background-color: #FFFF;
			padding-bottom: 30rpx;

			.searchtopBox {
				padding: 20rpx 20rpx;
				height: 80rpx;

				.searchtopBox-flex {
					display: flex;
					align-items: center;
					border-radius: 50rpx;
					border: 1rpx solid #14854D;

					.icon-sousuo {
						color: #000;
						font-weight: bold;
						font-size: 36rpx;
						margin-left: 30rpx;
					}

					.ml10 {
						flex: 1;
						font-weight: 400;
						font-size: 28rpx;
						color: #CCCCCC;
					}

					.searchBot {
						width: 136rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: #14854D;
						border-radius: 40rpx;
						font-weight: bold;
						font-size: 30rpx;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}

			.selectorTop {
				padding: 20rpx;

				.selectorBox-picker {
					width: 160rpx;
					height: 64rpx;
					border-radius: 10rpx;
					border: 1px solid #E1E1E1;
					line-height: 64rpx;
					text-align: center;
					font-weight: 400;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

			}

			.addressBox {
				border-radius: 10rpx;
				border: 1px solid #E1E1E1;
				padding: 20rpx 30rpx;
				margin: 0 30rpx;

				.icon-dizhi1 {
					color: #000;
				}

			}
		}
	}

	.scrollView {
		color: #FFF;
		font-size: 26rpx;
		display: flex;

		.width180 {
			width: 180rpx;
			background-color: #FFF;
		}

		.scrollView_left {
			width: 180rpx;
			padding: 30rpx 0;
			text-align: center;
		}

		.scrollView_right {
			text-align: center;
			padding: 20rpx 0;

			image {
				width: 510rpx;
				height: 200rpx;
				background: #CCCCCC;
				border-radius: 10rpx;
				margin: auto;
			}
		}
	}

	.publish {
		width: 130rpx;
		height: 60rpx;
		background: unset;
		right: 20rpx;
		bottom: 200rpx;

		button {
			background: unset;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>